<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak="></script>
</head>
<body>
<!--<div class = "info">百度地图前端API使用</div>-->
<div id="container"></div>
</body>
</html>
<script>

    // 1.创建Map实例病初始化
    var map = new BMapGL.Map('container'); // 创建Map实例
    var point = new BMapGL.Point(108.969122, 34.283494);
    map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。  可以通过获取金纬度的接口来获取
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放


    // 2. 设置地图的旋转角度和倾斜角度  地图可以自定义旋转角度和倾斜角角度
    map.setHeading(64.5);   //设置地图旋转角度
    map.setTilt(73);       //设置地图的倾斜角度

    // 3.默认模式为：普通地图模式 ，但是可以设置地图类型为[地球模式]/[卫星模式]
    map.setMapType(BMAP_EARTH_MAP);



    // 4.向地图添加控件
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);

    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);

    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    var opts = {
        offset: new BMapGL.Size(150, 5)
    }
    map.addControl(new BMapGL.ScaleControl(opts));



    // 5.向地图中添加信息窗口
   /* var opts = {
        width: 100,     // 信息窗口宽度
        height: 50,    // 信息窗口高度
        title: "地图信息窗口"  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());  // 打开信息窗口*/

    var marker = new BMapGL.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "故宫博物院" , // 信息窗口标题
        message:"这里是故宫"
    }
    var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function(){
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });


     // 设置覆盖物相关的属性
    // 创建点标记
    var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
    var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
    var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935));
    var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931));
    // 在地图上添加点标记
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    map.addOverlay(marker4);



    // 6.添加交通流量图层
    //map.setTrafficOn();   // 添加交通流量图层
    //向地图中添加文本标注
    //map.setTrafficOff(); // 移除交通流量图层



    // 7.定义菜单项
    var txtMenuItem = [
        {
            text:'放大',     // 定义菜单项的显示文本
            callback: function () {  // 定义菜单项点击触发的回调函数
                map.zoomIn();
            }
        },
        {
            text:'缩小',
            callback: function () {
                map.zoomOut();
            }
        }
    ];
    var menu = new BMapGL.ContextMenu(); // 定义菜单变量
    for(var i = 0; i < txtMenuItem.length; i++){
        menu.addItem(new BMapGL.MenuItem(               // 定义菜单项实例
            txtMenuItem[i].text,                        // 传入菜单项的显示文本
            txtMenuItem[i].callback,                    // 传入菜单项的回调函数
            {
                width: 100,                             // 指定菜单项的宽度
                id: 'menu' + i                          // 指定菜单项dom的id
            }
        ));
    }
    // 给地图添加右键菜单  使用addContextMenu方法给地图添加右键菜单。
    map.addContextMenu(menu);  // 给地图添加右键菜单

  /*  var menu = new BMapGL.ContextMenu();
    var txtMenuItem = [
        {
            text: '放大一级',
            callback: function () {
                map.zoomIn();
            }
        }, {
            text: '缩小一级',
            callback: function () {
                map.zoomOut();
            }
        }
    ];
    for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);
*/





    // 其他可参考的资料：
    // https://zhengqing.blog.csdn.net/article/details/85242521?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-10.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-10.control







</script>